
<template>
  <div class="left-box flex flex-c">
     <div class="left-top">
         <div class="title">资料类型</div>
         <div class="title-bottom" >
             <div v-for="(item, index) in tableData" :key="index" :class="menuIndex == item.id ? 'action' : ''" @click="menuClick(item, index)">
                 <!-- <img src="../../public/image/1.png" alt="" width="20px" style="margin: 0 10px 0 10%;"> -->
                  <div>
                     <span style="width: 50px; text-align: center; display: inline-block">{{  index + 1 }}</span>
                     {{ item.filename }}
                  </div>
                 <img v-if="menuIndex == item.id" src="../../public/image/duigou.png" alt="" width="20px" style="margin: 0 10px"> 
             </div>
         </div>
     </div>
     <div class="flex-1 flex flex-c left-bottom">
         <div class="title1"></div>
         <div class="left-table flex-1">
         <div v-for="(item, index) in leftTable" :key="index">
             <img v-if="index == 0" :src="img1" alt="" width="20px" style="margin: 0 10px" />
             <img v-if="index == 1" :src="img2" alt="" width="20px" style="margin: 0 10px" />
             <img v-if="index == 2" :src="img3" alt="" width="20px" style="margin: 0 10px" />
             <span v-if="index > 2">{{ index + 1 }}</span>
             {{ item.filename }}
         </div>
         </div>
     </div>
 </div>
</template>
<script>
 import { mapState } from 'vuex'
 export default {
     name: 'leftMenu',
     data() {
         return {
             menuIndex: 1,
             menuValue: 0,
             tableData: [],
             leftTable:[],
             img1: require("../../public/image/1.png"),
             img2: require("../../public/image/2.png"),
             img3: require("../../public/image/3.png")
         }
     },
     created(){
         this.account = sessionStorage.getItem('account')
         // this.form.username = sessionStorage.getItem('username')
         this.menuIndex = localStorage.getItem('menuIndex') || 1
         this.isadmin = sessionStorage.getItem('isadmin')
     },
     mounted(){
         this.initData()
     },
     methods: {
         initData() {
            this.$http.post(`/fileList/thecharts`, this.params).then((res) => {
                this.tableLoading = false;
                if (res.code == 200) {
                    this.leftTable = res.data.records || [];
                } else {
                    this.$message.error(res.message);
                }
            }).catch((err) => {
                this.$message.error(err.message);
            });
             this.tableData  = JSON.parse(localStorage.getItem('allData'))
         },
         menuClick(row, index){
             this.menuIndex = row.id
             localStorage.setItem('menuIndex', row.id)
             this.$store.commit('setMenuItem', row)
         }
     }
}
</script>
<style lang="scss" scoped>
.left-box {
width: 300px;
height: 100%;
// background-color: #fff;
.left-top {
 // height: 320px;
 margin-top: 15px;
 padding-bottom: 10px;
 background-image: url(../../public/image/left-bg.png);
 background-repeat: no-repeat;
 background-size: 100% 100%;
}
.left-bottom {
 margin-top: 10px;
 overflow: hidden;
 border: 2px solid;
 border-image: radial-gradient(circle, #308ce9, #ffffff) 1 1;
}
.title {
 font-size: 16px;
 font-weight: bold;
 padding: 5px 20px;
 background-image: url(../../public/image/leftHead.png);
 background-size: 100% 100%;
 // background-image: linear-gradient(to right, #89b7fb, #b1c7fc, #d1d8fc, #ebebfd, #ffffff);
}
.title1 {
 height: 70px;
 background-image: url(../../public/image/image1.png);
 background-size: 100% 100%;
}
.title-bottom {
 max-height: 500px;
 overflow-y: auto;
 padding: 10px;
 font-size: 14px;
 color: #070607;
 cursor: pointer;
 .action {
     color: #ffffff;
     background: linear-gradient(153deg, #F59025, #F7A912);
     text-shadow: 2px 3px 2px rgba(148,82,12,0.53);
     // background-color: #308ce9;
 }
 >div:nth-child(1){
     border-top: 1px solid #E5EFFD;
 }
 >div{
     height: 35px;
     // line-height: 35px;
     font-size: 14px;
     border-bottom: 1px solid #E5EFFD;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }
 // > div:nth-child(1) {
 //   height: 50px;
 //   line-height: 50px;
 //   padding-left: 20px;
 //   // background-color: #E5EFFD;
 //   // border: 1px solid #fff;
 //   background-image: url(../../public/image/quanbu.png);
 //   background-size: 100% 100%;
 //   &.action {
 //     color: #fff;
 //     text-shadow: 2px 3px 2px rgba(50, 77, 131, 0.53);
 //     // border: 1px solid #409EFF;
 //     background-image: url(../../public/image/quanbu1.png);
 //     background-size: 100% 100%;
 //   }
 // }
 // > div:nth-child(2) {
 //   height: 100px;
 //   background-image: url(../../public/image/weather.png);
 //   background-size: 100% 100%;
 //   &.action {
 //     background-image: url(../../public/image/weather1.png);
 //     background-size: 100% 100%;
 //   }
 // }
 // > div:nth-child(3) {
 //   height: 100px;
 //   background-image: url(../../public/image/survey.png);
 //   background-size: 100% 100%;
 //   &.action {
 //     background-image: url(../../public/image/survey1.png);
 //     background-size: 100% 100%;
 //   }
 // }
}
.menu-bottom {
 padding: 10px;
 // border: 1px solid #ccc;
 display: flex;
 flex-direction: column;
 justify-content: center;
 height: 100px;
 margin-top: 10px;
 // align-items: center;
 cursor: pointer;
 > div:nth-child(2) {
   font-size: 12px;
   color: #909399;
   margin-top: 10px;
 }
}
.left-table {
 font-size: 12px;
 list-style: none;
 padding: 0;
 margin: 0;
 overflow-y: auto;
 span {
   display: inline-block;
   width: 40px;
   text-align: center;
 }
 > div {
   padding: 10px;
   color: #555555;
   display: flex;
   align-items: center;
 }
 > div:nth-child(2n) {
   background-color: #f6f8fa;
 }
 > div:nth-child(1) {
   background-color: rgba(#f3bc51, 0.2);
 }
 > div:nth-child(2) {
   background-color: rgba(#93b5e0, 0.2);
 }
 > div:nth-child(3) {
   background-color: rgba(#f1c5ab, 0.2);
 }
}
}
</style>